<!-- 给报名用户打标签 -->
<template>
  <div>
    <a-modal
      :maskClosable="false"
      :destroyOnClose="true"
      title="给报名用户打标签"
      centered
      :width="800"
      v-model="visible"
      @ok="handleConfirm"
      @cancel="handleCancel"
      :afterClose="afterClose"
    >
      <div class="disFlxAC flexCenter">标签用于排座、打印胸卡等快速筛选用户</div>
      <SelectedUser v-if="isBranch" :list="selectedRows" />

      <AddLabel ref="addLabel" :activityId="activityId" @success="addLabelSuccess" />
      <div class="_pb-10 disFlxJS" style="border-bottom: 1px #ccc solid">
        <span>
          <span class="fw-6">请选择标签</span>
          <span class="_ml-10">共有或已选标签高亮显示</span>
        </span>
        <a class="fz-16" @click="handleAddLabel">新建标签</a>
      </div>
      <div class="tags">
        <div
          :class="['tag', defaultHighlights.includes(item.id) || highlights.includes(item.id) ? 'tag-highlight' : '']"
          v-for="item in label_list"
          :key="item.id"
          @click="handleSetHighlights(item.id)"
        >
          {{ item.name }}
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import SelectedUser from '@/views/activity/components/selectUser/selectedUser.vue'
import AddLabel from '@/views/activity/components/userTags/addLabel.vue'
import { branchLabelAdd } from '@/api/activity/activity'
export default {
  props: {
    // 活动ID
    activityId: {
      type: Number | String,
    },
    //是否批量操作
    isBranch: {
      type: Boolean,
    },
    //选中的报名人员
    selectedRows: {
      type: Array,
    },
    // 标签列表
    label_list: {
      default: () => [],
    },
  },
  components: {
    SelectedUser,
    AddLabel,
  },
  data() {
    return {
      visible: false,
      value: undefined,
      defaultHighlights: [],
      highlights: [],
      cancelLabelIds: [],
    }
  },
  methods: {
    moduleShow() {
      this.value = undefined
      this.visible = true
      this.$nextTick(() => {
        this.getDefaultHighlights()
      })
    },
    handleCancel() {
      this.visible = false
    },
    afterClose() {
      this.defaultHighlights = []
      this.highlights = []
      this.cancelLabelIds = []
      this.$emit('resetCheckedRows')
    },
    getDefaultHighlights() {
      let list = []
      let selectedRows = this.selectedRows
      for (let i = 0; i < selectedRows.length; i++) {
        const item = selectedRows[i]
        if (!item.labelIds) return
        list.push(item.labelIds.split(','))
      }
      //二维数组转一维数组
      list = list.flat(1)

      let mapData = list.reduce((cur, pre) => {
        if (cur[pre]) cur[pre] += 1
        else cur[pre] = 1
        return cur
      }, {})

      Object.keys(mapData).forEach((k) => {
        if (mapData[k] === selectedRows.length) this.defaultHighlights.push(Number(k))
      })
    },
    handleSetHighlights(id) {
      let index = this.defaultHighlights.findIndex((f) => f === id)
      if (index != -1) {
        this.defaultHighlights.splice(index, 1)
        this.cancelLabelIds.push(id)
        return
      }

      let index2 = this.cancelLabelIds.findIndex((f) => f === id)
      if (index2 != -1) {
        this.defaultHighlights.push(id)
        this.cancelLabelIds.splice(index2, 1)
        return
      }

      let index3 = this.highlights.findIndex((f) => f === id)
      if (index3 != -1) this.highlights.splice(index3, 1)
      else this.highlights.push(id)
    },
    //显示新建标签弹窗
    handleAddLabel() {
      this.$refs.addLabel.show()
    },
    addLabelSuccess({ id }) {
      this.$emit('refreshLabel')
      this.highlights.push(id)
    },
    async handleConfirm() {
      let { code } = await branchLabelAdd({
        registerIds: this.selectedRows.map((item) => item.id),
        addLabelIds: this.highlights,
        cancelLabelIds: this.cancelLabelIds,
      })
      if (code === 0) {
        this.$message.success('添加成功')
        this.$emit('branchLabelAddSuccess')
        this.handleCancel()
      }
    },
  },
}
</script>
<style lang="less" scoped>
.tags {
  display: flex;
  flex-wrap: wrap;
  .tag {
    padding: 10px 15px;
    font-size: 14px;
    border: 1px #ccc solid;
    margin-right: 20px;
    margin-top: 10px;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.03);
    cursor: pointer;
  }
  .tag-highlight {
    background: #38ae67;
    border: 1px #38ae67 solid;
    color: #fff;
  }
}
</style>
